
function updateElVisible(el, binding) {
    el.style.cursor = 'move';
    el.onmousedown = function (e) {
        const disx = e.pageX - el.offsetLeft;
        const disy = e.pageY - el.offsetTop;
        const maxX = document.body.clientWidth - parseInt(window.getComputedStyle(el).width);
        const maxY = document.body.clientHeight - parseInt(window.getComputedStyle(el).height);
        document.onmousemove = function (e) {
            let x = e.pageX - disx;
            let y = e.pageY - disy;
            x = Math.min(Math.max(x, 0), maxX);
            y = Math.min(Math.max(y, 0), maxY);
            console.log(x,'xx')

            el.style.left = x + 'px';
            el.style.top = y + 'px';
        };

        document.onmouseup = function () {
            document.onmousemove = document.onmouseup = null;
        };
    };
}

const hasDrag = {
    mounted(el, binding) {
        updateElVisible(el, binding);
    },
    beforeUpdate(el, binding) {
        updateElVisible(el, binding);
    }
};
export default  {
    install(Vue) {
         Vue.directive('drag', hasDrag);
    }
};

